<template>
    <div class="cent">
       <div class="cent-top"><el-input v-model="query.username" /><el-button @click="getUserTop">搜索</el-button></div>

        <div class="userlist-left">
            <el-scrollbar height="200px">
                <div class="left-list" v-if="userTop.id">
                    <img :src="userTop.image" class="left-list-img">
                    <span class="left-list-title">{{userTop.username}}</span>
                    <el-button color="#626aef" v-if="hasFriended" disabled plain >已是好友</el-button>
                    <el-button lass="left-list-bu" v-if="!hasFriended" @click="add(userTop.id)">添加</el-button>
                </div>
            </el-scrollbar>
        </div>

        <el-divider />

        <div class="userlist-left">
            <el-scrollbar height="300px">
                <div v-if="list.arr.length > 0">
                    <div class="left-list" v-for="(item, index) in list.arr" :key="index">
                        <img :src="item.image" class="left-list-img">
                        <span class="left-list-title">{{item.username}}</span>
                        <div class="left-list-bu">
                            <el-button color="#ccffcc" @click="acceptOrReject(item.id, '1')">接受</el-button>
                            <el-button color="#ff6666" @click="acceptOrReject(item.id, '0')">拒绝</el-button>
                        </div>
                    </div>
                </div>
                <div class="center" v-else>
                    暂无好友申请
                </div>
            </el-scrollbar>
        </div>

    </div>
</template>

<script lang="ts" setup>
    import { onMounted,reactive,ref } from 'vue/dist/vue.esm-bundler.js'
    import { getUserByUserName } from "../../api/user";
    import { hasFriend } from "../../api/friend";
    import {addApply,getfriends,agreeOrReject} from "../../api/apply";
    import { ElMessage } from 'element-plus'
import { el } from 'element-plus/es/locale/index.js';
    // import socket from "../../utils/websocket";

    let query = reactive({
        username:""
    });
    let hasFriended = ref(false);

    let userTop = reactive({});
    let list = reactive({arr:[]});

    const add = (e)=>{
        addApply({tid: e}).then(res=>{
            ElMessage({
            message: res.msg,
            type: 'success',
            })
        })
    }

    /**
     * 
     * @param e 好友id
     */
    const acceptOrReject = (e, status)=>{
        agreeOrReject({
            tid:e,
            status: status
        }).then(res=>{
            ElMessage({
                message: '成功',
                type: 'success',
            })
            location.reload();
        })

    }

    /**
     * 搜索按钮
     */
    const getUserTop = ()=>{
        // 根据用户名获取用户信息
        getUserByUserName(query).then(res=>{
            if (res.data){
                userTop.id = res.data.id;
                userTop.username = res.data.username;
                userTop.image = res.data.image;

                // 判断是否已经是好友
                hasFriend({fid:userTop.id}).then(res=>{
                    hasFriended.value = res.data;
                })
            }
        })
    }

    /**
     * 获取好友申请列表
     */
    const getfriend = ()=>{
        getfriends().then(res => {
            list.arr = res.data
        })
    }

    /**
     * 钩子函数
     */
    onMounted(()=>{
        getfriend()
    })
</script>

<style scoped>
    .cent{

        padding: 20px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .cent-top{
        display: flex;
    }

    .userlist-left{
        display: flex;
        flex-direction: column;
    }

    .left-list{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows:repeat(1,1fr);
        grid-template-areas: 'a b c'
        'a b c';
        justify-items: center;
        align-items:center;
        margin-top: 10px;
    }

    .left-list-img{
        width: 50px;
        height: 50px;
        border-radius: 5px;
        grid-area:a
    }
    .left-list-title{
        grid-area:b
    }
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ccc;
        font-size: 24px;
        font-weight: bold;
    }
</style>
